<template>
    <div class="page">
        <NavBarSimple @click-left="onBack"/>
        <van-swipe class="swipe bg-white">
            <van-swipe-item v-for="(item,index) in goodsInfo.picList" v-bind:key="index">
                <div class="swiper-item">
                    <van-image :src="item"/>
                </div>
            </van-swipe-item>
        </van-swipe>

        <div class="bg-white page-pad-pk">
            <div class="price-warp d-flex-pk align-items-center">
                <Status statue="keeping" class="d-inline-block"/>
                <Price class="d-inline-block" :value="goodsInfo.originalPrice" :prefixStyle="prefixStyle"/>
            </div>
            <div class="font-size-14-pk font-bold goods-name">
                {{goodsInfo.goodsName}}
            </div>
            <ProgressBar
                class="progress"
                :size="progress.size"
                :value="goodsInfo.nowCouponNum"
                :max="goodsInfo.awardCouponNum"
            />
            <div class="be-join text-center">
                <div class="" v-if="goodsInfo.isJoin">
                    <span class="text-danger">你已使用{{myJoinInfo.total}}张福屏卷,</span>
                    <span class="text-warning">查看我的幸运号码</span>
                </div>
                <div class="" v-else>
                    您还没有参与本次夺宝，快来参与吧！
                </div>
            </div>
            <div class="space-15"/>
        </div>
        <DetailRichText :detailHtml="goodsInfo.goodsContent"/>
        <div class="join-list bg-white page-pad-pk">
            <div class="d-flex-pk title mb-2">
                <div class="font-size-18-pk font-bold">正在参与</div>
                <div class="text-warning">使用夺宝券越多，中奖概率越大</div>
            </div>
            <van-list
                v-model="joinInfo.loading"
                :finished="joinInfo.finished"
                finished-text="没有更多了"
                @load="onLoadJoinInfo"
            >
                <JoinList :list="joinList"/>
            </van-list>
        </div>

        <div class="position-fixed fixed-bottom bg-orange w-100">
            <div class="page-pad-pk d-flex-pk justify-content-between align-items-center footer" @click="join">
                <div class="text-white">活动正在火热进行中</div>
                <div class="rounded-pill bg-white d-flex-pk btn-join" @click="join">
                    <div class="text-warning d-inline-block now">立即参与</div>
                    <van-icon name="arrow" color="#FFFFFF" class="d-inline-block icon" size="12"/>
                </div>
            </div>
        </div>
        <van-popup v-model="showJoinDialog">
            <JoinDialog
                :awardCouponNum="goodsInfo.awardCouponNum"
                :nowCouponNum="goodsInfo.nowCouponNum"
                :myFpCouponNum="treasureInfo.fpCouponNum"
                :limitBuy="goodsInfo.limitBuy"
                @click-join="joinResult"
            />
        </van-popup>
    </div>
</template>

<script>
    import NavBarSimple from "./components/NavBarSimple";
    import Status from "./components/Status";
    import Price from "./Price";
    import ProgressBar from './ProgressBar';
    import JoinList from "./components/JoinList";
    import DetailRichText from "./components/DetailRichText";
    import JoinDialog from './components/JoinDialog';
    import {Stepper} from 'vant';

    export default {
        name: "Detail",
        components: {
            JoinDialog,
            DetailRichText,
            Status,
            NavBarSimple,
            Price,
            ProgressBar,
            JoinList,
            [Stepper.name]: Stepper
        },
        data() {
            return {
                treasureInfo: {},
                goodsInfo: {},
                prefixStyle: {
                    color: '#FF5300',
                    fontSize: '20px',
                    fontWeight: "bold"
                },
                progress: {
                    size: 8
                },
                joinInfo: {
                    loading: false,
                    finished: false,
                    page: this.$global.page,
                    pages: this.$global.pages,
                    size: this.$global.size,
                },
                joinList: [],
                myJoinInfo: {
                    loading: false,
                    finished: false,
                    page: this.$global.page,
                    pages: this.$global.pages,
                    size: this.$global.size,
                    codeList: [],
                    total: 0,
                },
                joinNumber: 10,
                showJoinDialog: false
            }
        },
        created() {
            this.getTreasureInfo();
            this.getTreasureGoodsInfo();
        },
        methods: {
            getTreasureInfo: function () {
                this.$api.getTreasureInfo().then(res => {
                    this.treasureInfo = res.data.data;
                    localStorage.setItem("treasureInfo", JSON.stringify(res.data.data));
                });
            },
            getTreasureGoodsInfo() {
                // let id = this.$route.query.id;
                // this.$api.getTreasureGoodsInfo(id).then((res) => {
                //     this.goodsInfo = res.data.data;
                //     if(this.goodsInfo.isJoin )
                // })
            },
            getJoinList() {
                let id = this.$route.query.id;
                this.$api.getJoinList({
                    "activityGoodsId": id,
                    "page": this.joinInfo.page,
                    "size": this.joinInfo.size
                }).then(res => {
                    this.joinInfo.page = res.data.pageNum;
                    this.joinInfo.pages = res.data.pages;
                    if (this.joinInfo.page === this.joinInfo.pages) {
                        this.joinInfo.finished = true;
                    }
                    if (res.data.data) {
                        this.joinList = this.joinList.concat(res.data.data.list);
                    }
                });
            },
            getMyCode() {
                let id = this.$route.query.id;
                this.$api.getMyCode({
                    "activityGoodsId": id,
                    "page": ++this.myJoinInfo.page,
                    "size": this.myJoinInfo.size
                }).then(res => {
                    this.myJoinInfo.page = res.data.pageNum;
                    this.myJoinInfo.pages = res.data.pages;
                    if (this.myJoinInfo.page === this.myJoinInfo.pages) {
                        this.myJoinInfo.finished = true;
                    } else {
                        this.myJoinInfo.codeList = res.data.data;
                        this.myJoinInfo.total = res.data.data.total;
                    }
                });
            },
            onBack() {
                let url = this.$route.query.url;
                this.$router.push({
                    path: url
                });
            },
            onLoadJoinInfo() {
                this.getJoinList()
            },
            onLoadMyJoinInfo() {
                this.getMyCode()
            },
            join() {
                this.showJoinDialog = true;
            },
            joinResult(value) {
                let id = this.$route.query.id;
                this.$api.joinTreasure({
                    "activityGoodsId": id,
                    "fpCouponNum": value
                }).then(res => {
                    if (res.data.data === null) {
                        this.joinInfo.page = this.$global.page;
                        this.joinInfo.pages = this.$global.pages;
                        this.myJoinInfo.page = this.$global.page;
                        this.myJoinInfo.pages = this.$global.pages;
                        this.joinList = [];
                        this.myJoinInfo.codeList = [];
                        this.getTreasureInfo();
                        this.getMyCode();
                        this.getJoinList();
                        this.getTreasureGoodsInfo();
                    } else {
                        this.$toast.fale({
                            content: res.data.msg
                        });
                        return false;
                    }

                });

            }
        },
    }
</script>

<style lang="scss" scoped>
    @import "treasure";

    .swipe {
        width:  100vw;
        height: 100vw;

        .van-image {
            width:    100%;
            overflow: hidden;
        }
    }

    .mb-2 {
        margin-bottom: 15px;
    }

    .price-warp {
        padding-top:   12px;
        margin-bottom: 10px;
    }

    .goods-name {
        font-size:     18px;
        margin-bottom: 15px;
    }

    .progress {
        margin-bottom: 15px;
    }

    .be-join {
        color:      #8F3002;
        background: #FCE4D8;
        padding:    15px 5px;
    }

    .join-list {
        padding-top:    15px;
        padding-bottom: 50px;

        .title {
            align-items: flex-end;
        }
    }

    .footer {
        height:     48px;
        background: linear-gradient(-62deg, rgba(255, 78, 0, 1) 0%, rgba(252, 128, 42, 1) 100%);

        .btn-join {
            padding:     10px 15px;
            align-items: center;
        }

        .now {
            font-weight: bold;
        }

        .icon {
            background:    $orange;
            border-radius: 100%;
            padding:       2px;
            margin:        3px 0 0 3px;
        }
    }

    .space-15 {
        height: 15px;
    }
</style>
